<!-- 项目列表 -->
<template>
  <div class="supply container-content">
    <div class="app-view-box">
      <el-row>
        <el-col :span="24">
          <h1 class="panel-title">项目列表</h1>
        </el-col>
      </el-row>
      <el-divider class="divider"></el-divider>
      <el-row class="export-container">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add"
          >新增</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="exporting"
          >导出</el-button
        >
      </el-row>

      <el-table
        ref="customerTable"
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="projectCode" label="项目编码"></el-table-column>
        <el-table-column prop="deptId" label="子公司id"></el-table-column>
        <el-table-column prop="deptName" label="子公司名称"></el-table-column>
        <el-table-column prop="customerId" label="所属客户"></el-table-column>
        <el-table-column
          prop="contactsPhone"
          label="联系电话"
        ></el-table-column>
        <el-table-column
          prop="responsibleUserId"
          label="负责人"
        ></el-table-column>
        <el-table-column
          prop="projectTypeId"
          label="项目类型"
        ></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="bottom"
            >
              <el-button
                plain
                size="small"
                icon="el-icon-more"
                @click="handleDetail(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <el-button
                type="primary"
                plain
                size="small"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-button
                type="danger"
                plain
                size="small"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="table-pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getList, deleteProject } from "@/api/system/project";

export default {
  data() {
    return {
      tableData: [],
      searchValue: "",
      total: 0,
      selectRows: [],
    };
  },
  methods: {
    // 获取供应商列表
    getData() {
      // let type = 3;
      getList().then((res) => {
        this.tableData = res.rows;
        this.total = res.total * 1;
      });
    },
    //新增
    add() {
      console.log(this.$route.meta.menuId);
      this.$store.dispatch("workflow/getModel", {
        menuId: this.$route.meta.menuId,
        type: "launch",
      });
    },
    //详情
    handleDetail(index, row) {
      // this.$router.push({
      //   path: "/CustomerManager/CustomerDetail",
      //   query: { id: row.id },
      // });
    },
    // 编辑
    handleEdit(index, row) {
      // this.$router.push({
      //   path: "/CustomerManager/EditCustomer",
      //   query: { id: row.id },
      // });
    },

    // 删除
    handleDelete(index, row) {
      this.$confirm("请确定要删除所选的记录吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteProject(row.id).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 导出按钮
    exporting() {
      console.log("exporting");
    },
    // 表格checkcbox事件
    handleSelectionChange(rows) {
      this.selectRows = rows;
    },
  },

  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
// .visits {
//   padding: 15px;
// }
.pagination {
  margin-top: 10px;
}

.filter-container {
  margin-bottom: 15px;
}

.export-container {
  margin: 15px 0;
}

.panel-title {
  font-size: 18px;
  color: #37474f;
  font-weight: 500;
  text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
}

.divider {
  margin: 0;
}
</style>
